<!DOCTYPE html>
<th:block xmlns:th="https://www.thymeleaf.org"
          th:insert="~{common/layout :: layout (title = ${site.title}, canonical = ${site.url}, content = ~{::content}, isPost = false)}"
          th:with="isFirstIndex = ${posts.first}">
  <th:block th:fragment="content" th:with="isEmpty = ${#lists.isEmpty(posts)}">
    <div th:if="${isEmpty}" class="card card-empty">
      <i class="ri-inbox-2-fill"></i>
      还没有发表过文章
    </div>
    <th:block th:unless="${isEmpty}">
      <th:block th:replace="~{::firstIndex}"/>
      <th:block th:replace="~{main/article_list :: articleList (${posts.items})}"/>
      <th:block th:replace="~{main/pagination :: pagination (${posts}, '/index')}"/>
    </th:block>
  </th:block>

  <th:block th:if="${posts.first}" th:fragment="firstIndex"
            th:with="moduleSize = ${#lists.isEmpty(theme.config.basic_style.module_options) ? 0 : #lists.size(theme.config.basic_style.module_options)}, isModule = ${(theme.config.basic_style.sidebar_column=='module-left' || theme.config.basic_style.sidebar_column=='module-right') && moduleSize > 0}">
    <th:block th:if="${isModule}">
      <div class="model model-index">
        <th:block th:replace="~{::carousel}"/>
        <div class="model model-index-side">
          <th:block th:each="index : ${#numbers.sequence(0, 1)}">
            <th:block th:if="${index < moduleSize}">
              <th:block th:replace="~{::buildModule (${theme.config.basic_style.module_options.get(index)})}"/>
            </th:block>
          </th:block>
        </div>
      </div>
      <div th:if="${moduleSize > 2}" class="'model model-attach model-attach-' + ${moduleSize - 2}">
        <th:block th:each="index : ${#numbers.sequence(2, 5)}">
          <th:block th:if="${index < moduleSize}">
            <th:block th:replace="~{::buildModule (${theme.config.basic_style.module_options.get(index)})}"/>
          </th:block>
        </th:block>
      </div>
    </th:block>
    <th:block th:unless="${isModule}">
      <th:block th:replace="~{::carousel}"/>
    </th:block>
    <div th:if="${!#strings.isEmpty(theme.config.basic_info.index_inform)}" class="card tips brightness"
         th:utext="${theme.config.basic_info.index_inform}"></div>
  </th:block>

  <th:block th:fragment="buildModule (option)">
    <a th:class="'card widget brightness ' + ${option.title != ''? 'bg-shadow' : ''}"
       th:target="${option.target}"
       th:style="'background-image: url(' + ${option.image} + ')'"
       th:href="${option.url}">
      <div class="title" th:href="${option.title}"></div>
      <div class="tag" th:text="${option.tag}"></div>
    </a>
  </th:block>

  <th:block th:fragment="carousel">
    <div th:if="${!#lists.isEmpty(theme.config.basic_style.carousel_options)}" class="card widget swiper">
      <div class="swiper-wrapper">
        <a th:each="option :${theme.config.basic_style.carousel_options}" class="swiper-slide bg-shadow cover-image"
           th:style="'background-image: url(' + ${option.image} + ')'" th:target="${option.target}"
           th:href="${option.url}">
          <div class="swiper-slide-details" data-swiper-parallax="200" data-swiper-parallax-duration="600">
            <p class="swiper-slide-details-title" th:text="${option.title}"></p>
          </div>
        </a>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </th:block>
</th:block>